<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta content="telephone=no,email=no" name="format-detection" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/theme/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/layerui/layer.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/layerui/layer.ext.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/skin/css/mobilecss/charge.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/skin/css/mobilecss/main.css">
    
<title>房卡管理首页</title>
</head>
<body >
    <div class="container">
        <p>充房卡</p>
        <h3>当前房卡余额：<span id="leftCardId">${totalCard}</span>张</h3>
        <div>
            <input type="tel" placeholder="输入收卡方玩家ID" style="width: 70%" id="userNameTextId" >
            <button style="width: 20%" onclick="selectRecevieCardUserClick()">查询</button>
        </div>
        <div class="shou_info" id="userInfodiv" style="visibility: hidden;">
        <p style="font-size: 1.17em;font-weight: bold">收卡方信息</p>
            <input type="hidden" name="userId" id="userId" >
            <input type="hidden" name="gameId" id="gameId" >
            <h3 style="font-size: 0.8rem" id="roleNameId"></h3>
            <p style="font-size: 0.8rem"  id="roleNumId"></p>
            <p>房卡余额：<span id="cardLeftId"></span> 张</p>
            <div style="position: relative;display: none" id="taocanDivId" >
                <span  style="width: 30%;display: inline-block" >
                    <input type="radio" id="taocan" name="buyCardName" value="1"  ><label for="taocan">套餐</label>
                </span>
                <select style="width: 61%;display: inline-block;border: 1px solid #636363;padding: 0.5rem;color: #999" id="buyCardGroupId" style="height:34px;width:100%;">
	                <option value="1">零售，1元1张</option>
			        <option value="13">10元12张，送1张</option>
			        <option value="40">30元36张，送4张</option>
			        <option value="90">60元80张，送10张</option>
			        <option value="180">100元160张，送20张</option>
                </select>
                
                <input type="radio" id="mine" name="buyCardName" value="2" checked="checked" ><label for="mine" >自定义</label>
            </div>
            <div id="zidingyiDivId">
                <span  style="width: 20%;display: inline-block">
               		 充卡数量：
                </span>
                <input type="tel" placeholder="请输入充卡的数量"  style="width: 70.7%" id="mineCardNumId"  >
				<input type="text"  style="width: 71%;border:none;margin-left:30%;color:#999;" id="mineCardNum"  >
            </div>
            <div id="zidingyiGiftDivId" >
                <span  style="width: 20%;display: inline-block;text-align: center;font-weight: bold">赠送</span>
                <input type="tel"  placeholder="请输入赠送的数量"  style="width: 70.7%" id="giftCardNumId">
				<input type="text"  style="width: 61%;border:none;margin-left:30%;color:#999;" id="giftCardNum"  >
            </div>
            <div id="zidingyiGiftDivId" >
                <span  style="width: 20%;display: inline-block;text-align: center;font-weight: bold">充值金额</span>
                <input type="tel"  placeholder="请输入充卡的金额"  style="width: 70.7%" id="orMoneyId">
				<input type="text"  style="width: 61%;border:none;margin-left:30%;color:#999;" id="orMoney"  >
            </div>
            <div style="display:none;border: 0px solid #636363">
                <span  style="width: 20%;display: inline-block">
                	充卡备注：
                </span>
                <input type="text" placeholder="选填，仅对你可见" style="width: 70.7%" id="descriptionId" >
            </div>
            <div>
            <p style="height: 12px"></p>
                <button style="width: 100%" id="done" onclick="buyCardClick()">
                                确认充卡
                </button>
            </div>
        </div>
    </div>
    
    <div class="alert" id="alertDivId" style="display: none">
        <div >
            <p>共充卡<span id="confirmCardTotalId"></span>张</p>
            <p>包括：<span id="taocanConfirmId"></span></p>
            <p>金额：<span id="orMoneyConfirmId"></span>元</p>
            <p style="margin-top:1rem">收卡方信息</p>
			<p id="realNameConfirmId"></p>
            <p id="roleNumConfirmId"></p>
           <!--  <p id="isUsedConfirmLbl">状态：<span id="isUsedConfirmId"></span></p> -->
            <div>
                <button id="ok" onclick="confirmBuyCardClick()">确认充卡</button>
                <button style="background-color: #666;margin-left: 5%" id="close" onclick="closeAlertClick()">取消</button>
            </div>
        </div>
    </div>
    <script>
        $(function(){
        	
        	
        });
       
        function selectRecevieCardUserClick() {
        	var gameId = $('#userNameTextId').val();
        	if(checknumber(gameId)){
        		layer.alert(" 请输入有效的游戏ID ");
        		return;
        	}
        	if(gameId.length >= 1) {
       	    	//玩家id
           		$.post("${pageContext.request.contextPath}/admin/card_add_mobile.html",
        		        {"gameId":gameId},
        		  function(data){
   		            	var json = eval("("+data+")");
   						if(json.statusCode =='200'){
   							if(json.playerInfo!=null){
	   							$('.shou_info').css("visibility","visible");  
	   							$("#userId").val(json.playerInfo.userId);
	   							$("#gameId").val(json.playerInfo.gameId);
	   							$("#roleNameId").html("玩家："+json.playerInfo.nickName);
	   							$("#roleNumId").html("ID："+json.playerInfo.gameId);
	   							$("#cardLeftId").html(json.playerInfo.insureScore);
   							}else{
   								layer.alert(" 请输入有效的玩家ID ");
   							}
       					}
        		  });
           	}else{
           		layer.alert(" 请输入玩家ID ");
           	}
        }
        
        
        function buyCardClick() {
        	var type = $('input:radio[name="buyCardName"]:checked').val();
        	var diamond="";
        	var orMoney="";
        	if(type == "2") {
        		diamond = Number($.trim($('#giftCardNumId').val().replace(/\,/g,""))) + Number($.trim($('#mineCardNumId').val().replace(/\,/g,"")));
            	var taocanTipStr = "包含购卡" + $.trim($('#mineCardNumId').val().replace(/\,/g,"")) + "张";
            	if(parseInt($.trim($('#giftCardNumId').val().replace(",",""))) > 0) {
            		taocanTipStr = taocanTipStr + "；赠卡" + $.trim($('#giftCardNumId').val().replace(/\,/g,"")) + "张";
            	}
        		$('#taocanConfirmId').html(taocanTipStr);
        	} else {
        		diamond = $('#buyCardGroupId').val();
            	$('#taocanConfirmId').html($('#buyCardGroupId option:selected').text());
        	}
        	
        	if(diamond=="") {
        		layer.alert( '房卡数量不能为空！');
        		return;
        	} else if( diamond < 0) {
        		layer.alert( '房卡数量必须是大于0的数字！');
        		return;
        	} else if(diamond.length > 9) {
        		layer.alert( '房卡数量长度必须小于9位数！');
        		return;
        	}
        	orMoney = Number($.trim($('#orMoneyId').val().replace(/\,/g,""))) ;
        	if(orMoney==""){
        		layer.alert( '金额数量必须大于0 ！');
        		return;
        	}
        	if(orMoney.length<4){
        		layer.alert( '金额数量必须小于4位数 ！');
        		return;
        	}
        	$('#orMoneyConfirmId').html(orMoney);
        	$(".alert").css('display', 'block');
        	$('#confirmCardTotalId').html(diamond);
        	$('#realNameConfirmId').html($('#roleNameId').html());
        	$('#roleNumConfirmId').html($('#roleNumId').html());
        	$('#isUsedConfirmId').html($('#isUsedId').html());
        }
        
        
        function confirmBuyCardClick() {
			if($('#isUsedId').html() == '已冻结') {
				layer.alert('该账户已冻结，暂时不能充卡');
				$(".alert").css('display', 'none');
				return;
			}
			$('#ok').attr('disabled',"true"); //添加disabled属性 
			var userId = $("#userId").val();
			var gameId=$("#gameId").val();
			var card = Number($.trim($('#mineCardNumId').val().replace(/\,/g,"")))==''?0:Number($.trim($('#mineCardNumId').val().replace(/\,/g,"")));
			var awardCard = Number($.trim($('#giftCardNumId').val().replace(/\,/g,"")))==''?0:Number($.trim($('#giftCardNumId').val().replace(/\,/g,"")));
			var remark =$("#descriptionId").val();
			var func = $('#buyCardGroupId option:selected').val();
			var buyCardGroupId = $('input[name="buyCardName"]:checked').val();
			var orMoney = Number($.trim($('#orMoneyId').val().replace(/\,/g,""))) ;
			if(card==""&&func==""){
				layer.alert("请填写充值信息");
				return;
			}
			$.post("${pageContext.request.contextPath}/admin/card_user_add_save.html",
		        {"userId":userId,"card":card,"awardCard":awardCard
				,"remark":remark,"func":func,"buyCardGroupId":buyCardGroupId,"gameId":gameId,"orMoney":orMoney},
		       function(data){
	            	var json = eval("("+data+")");
					layer.alert(json.message);
					$('#ok').removeAttr("disabled");  //移除disabled属性 
					if(json.statusCode =='200'){
						$("#leftCardId").html($("#leftCardId").html()-$('#confirmCardTotalId').html());
						$("#cardLeftId").html(parseInt($("#cardLeftId").html())+parseInt($('#confirmCardTotalId').html()));
						setTimeout("closeAlertClick()",2000);
					}
		      });
			
        	$(".alert").css('display', 'none');
        }
        
        
        function checknumber(String) 
        { 
	        var Letters = "1234567890"; 
	        var i; 
	        var c; 
	        for( i = 0; i < String.length; i ++ ) 
	        { 
	        	c = String.charAt( i ); 
		        if (Letters.indexOf( c ) ==-1) 
		        { 
		       		return true; 
		        } 
	        } 
	        return false; 
        }
        
        
    	function closeAlertClick() {
			$('.alert').css('display', 'none');
		}
		
		$('#mineCardNumId').bind('input propertychange', function() {
			$('#mineCardNumId').val(thousandBitSeparator($(this).val()));
			$('#mineCardNum').val(DX($('#mineCardNumId').val()));
	    });
		$('#giftCardNumId').bind('input propertychange', function() {
			$('#giftCardNumId').val(thousandBitSeparator($(this).val()));
			$('#giftCardNum').val(DX($('#giftCardNumId').val()));
		}); 
		// 
		$('#orMoneyId').bind('input propertychange', function() {
			$('#orMoneyId').val(thousandBitSeparator($(this).val()));
			$('#orMoney').val(DX($('#orMoneyId').val()));
		});
		
		function thousandBitSeparator(t)
        {
          var stmp = "";
          if(t==stmp) return;
          var ms = t.replace(/[^\d\.]/g,"").replace(/(\.\d{2}).+$/,"$1").replace(/^0+([1-9])/,"$1").replace(/^0+$/,"0");
          var txt = ms.split(".");
          while(/\d{4}(,|$)/.test(txt[0]))
            txt[0] = txt[0].replace(/(\d)(\d{3}(,|$))/,"$1,$2");
          t = stmp = txt[0]+(txt.length>1?"."+txt[1]:"");
          return t
        }
		function DX(num) {
			var n = num.replace(/[^0-9]/g,'');
			if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
			return "数据非法";
			var unit = "千百拾亿千百拾万千百拾元角分", str = "";
			n += "00";
			var p = n.indexOf('.');
			if (p >= 0)
			n = n.substring(0, p) + n.substr(p+1, 2);
			unit = unit.substr(unit.length - n.length);
			for (var i=0; i < n.length; i++)
			str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
			return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "整");
		}
    </script>
</body>
</html>
